<template>
  <div class="f-footer">
    <el-main class="main">
      <el-row>
        <!--<el-col :span="8" class="item-col">
				<div class="title">常用工具</div>
				<div class="item"><a href="#" class="out-link">aaa</a></div>
				<div class="item"><a href="#" class="out-link">aa</a></div>
        </el-col>-->
        <el-col :span="8" class="item-cs://github/cxtao666ol">
          <div class="title">{{$t('footer.expressLane')}}</div>
          <div class>
            <a href="https://github.com/cxtao666" class="out-link" target="_blank">{{$t('footer.gitHub')}}</a>
          </div>
          <div class>
            <a href="https://cxtao666.github.io" class="out-link" target="_blank">github博客</a>
          </div>
          <div class>
            <router-link class="out-link" to="/login">{{$t('footer.admin')}}</router-link>
          </div>
        </el-col>
        <el-col :span="8" class="item-col weside">
          <div class="item">
            <i class="el-icon-caret-right"></i>
            本站已稳定运行{{timenow.dayDiff}}天{{timenow.hours}}小时{{timenow.minutes}}分钟{{timenow.seconds}}秒
          </div>
          <div class="item">
            <i class="el-icon-caret-right"></i>
            myblog-tao.cn
          </div>
          <div class="item">
            <i class="el-icon-caret-right"></i>
            © cxtao-博客
          </div>
          <div class="item">
             <i class="el-icon-caret-right"></i>
             <a href="http://beian.miitbeian.gov.cn"  class="here">粤ICP备案号19117646</a>
          </div>
        </el-col>
      </el-row>
    </el-main>
  </div>
</template>

<script>
export default {
  name: "footer",
  data() {
    return {
      time: "",
      timenow: {}
    };
  },
  created() {
    let c = this;

    this.$http.get("/api/blog/time").then(res => {
      console.log(res.data);

      console.log(res.data.time);
      c.time = res.data.time;
    });
  },
  watch: {
 
    time: function(val, oldval) {
      let c = this;
	
      let date1 = val;


      let time1 = new Date(Date.parse(date1.replace(/-/g, "/")));

      setInterval(function() {
        var dateEnd = new Date(); //获取当前时间
        var dateDiff = dateEnd.getTime() - time1.getTime(); //时间差的毫秒数
        var dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000)); //计算出相差天数
        var leave1 = dateDiff % (24 * 3600 * 1000); //计算天数后剩余的毫秒数
        var hours = Math.floor(leave1 / (3600 * 1000)); //计算出小时数
        //计算相差分钟数
        var leave2 = leave1 % (3600 * 1000); //计算小时数后剩余的毫秒数
        var minutes = Math.floor(leave2 / (60 * 1000)); //计算相差分钟数
        //计算相差秒数
        var leave3 = leave2 % (60 * 1000); //计算分钟数后剩余的毫秒数
        var seconds = Math.round(leave3 / 1000);

        c.timenow = { dayDiff, hours, minutes, seconds };
      }, 1000);
    }
  }
};
</script>

<style scoped>
.f-footer {
  padding: 20px;
  text-align: center;
  color: #fff;
  background-color: #555;
}
.main {
  width: 70%;
  margin: 0 auto;
  color: #ccc;
}
.out-link {
  text-decoration: none;
  color: #ccc;
}
.out-link:hover {
  color: #ffffff;
}
.item-col {
  text-align: left;
}
.item-col.weside {
  font-size: 14px;
}
.item-col .title {
  color: #ddd;
  margin-bottom: 10px;
}
.item span {
  margin-right: 5px;
}
.here:hover{
  color: #fefefe;
}
.here{
  color:#333333;text-decoration:none;
}
</style>